<script>
import { defineComponent, ref, onMounted, onBeforeUnmount, nextTick } from 'vue'
import { Search } from '@element-plus/icons-vue'

export default defineComponent({
  name: 'GlobalSearch',
  components: {
    Search
  },
  setup() {
    // 响应式数据
    const dialogVisible = ref(false)
    const searchText = ref('')
    const loading = ref(false)
    const results = ref([])
    const inputRef = ref(null)

    // 处理方法
    const handleKeyDown = (e) => {
      // Windows: Ctrl + K, Mac: Command + K
      if ((e.ctrlKey || e.metaKey) && e.key.toLowerCase() === 'k') {
        e.preventDefault()
        openDialog()
      }

      // 单独处理 ESC 键
      if (e.key === 'Escape') {
        dialogVisible.value = false
      }
    }

    const openDialog = () => {
      dialogVisible.value = true
      nextTick(() => {
        inputRef.value?.focus()
      })
    }

    const handleClose = () => {
      searchText.value = ''
      results.value = []
    }

    const handleSearch = async () => {
      loading.value = true
      try {
        await new Promise(resolve => setTimeout(resolve, 500))
        results.value = [{ id: 1, title: '示例结果' }]
      } finally {
        loading.value = false
      }
    }

    // 生命周期
    onMounted(() => {
      window.addEventListener('keydown', handleKeyDown)
    })

    onBeforeUnmount(() => {
      window.removeEventListener('keydown', handleKeyDown)
    })

    // 暴露给模板
    return {
      dialogVisible,
      searchText,
      loading,
      results,
      inputRef,
      handleClose,
      handleSearch
    }
  }
})
</script>

<template>
  <el-dialog
      v-model="dialogVisible"
      :show-close="false"
      width="600px"
      class="global-search-dialog"
      append-to-body
      @closed="handleClose"
  >
    <template #header>
      <div class="dialog-header">
        <el-icon class="search-icon"><Search /></el-icon>
        <el-input
            ref="inputRef"
            v-model="searchText"
            placeholder="输入关键词搜索..."
            @input="handleSearch"
        />
        <div class="shortcut-hint">Esc</div>
      </div>
    </template>

    <div v-loading="loading" class="search-results">
      <div v-if="results.length" class="result-list">
        <div v-for="item in results" :key="item.id" class="result-item">
          {{ item.title }}
        </div>
      </div>
      <div v-else class="empty-state">暂无搜索结果</div>
    </div>
  </el-dialog>
</template>

<style lang="scss">
/* 样式部分保持不变 */
.dialog-header {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 20px;
  border-bottom: 1px solid var(--el-border-color);

  .search-icon {
    font-size: 18px;
    color: var(--el-text-color-secondary);
  }

  .shortcut-hint {
    font-size: 12px;
    color: var(--el-text-color-secondary);
    padding: 2px 8px;
    border: 1px solid var(--el-border-color);
    border-radius: 4px;
    background: var(--el-fill-color-light);
  }
}

.search-results {
  min-height: 200px;
  max-height: 60vh;
  overflow-y: auto;

  .result-list {
    padding: 8px 0;

    .result-item {
      padding: 12px 20px;
      cursor: pointer;
      transition: background-color 0.2s;

      &:hover {
        background-color: var(--el-fill-color-light);
      }
    }
  }

  .empty-state {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 200px;
    color: var(--el-text-color-secondary);
  }
}

.global-search-dialog {
  border-radius: 8px;
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.1);

  .el-dialog__header {
    margin: 0;
    padding: 0;
  }

  .el-dialog__body {
    padding: 0;
  }
}
</style>
